<template>
  <div class="register">
    <div class="top">
      <div class="title">{{hospitalStore.hospitalInfo.hospital?.hosname}}</div>
      <div class="level">
        <svg t="1730690734571" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3159" width="16" height="16"><path d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z" p-id="3160" fill="#bfbfbf"></path></svg>
        <span>{{hospitalStore.hospitalInfo.hospital?.param.hostypeString}}</span>
      </div>
    </div>
    <!-- 展示内容区域 -->
    <div class="content">
      <div class="left">
        <img :src="`data:image/jpeg;base64,`+hospitalStore.hospitalInfo.hospital?.logoData" alt="">
      </div>
      <div class="right">
        <div>挂号规则</div>
        <div class="time">
          预约周期:10天  放号时间:{{ hospitalStore.hospitalInfo.bookingRule?.releaseTime }} 停挂时间:{{ hospitalStore.hospitalInfo.bookingRule?.stopTime }}
        </div>
        <div class="address">
          具体位置:{{ hospitalStore.hospitalInfo.hospital?.param.fullAddress }}
        </div>
        <div class="route">
          具体路线:{{ hospitalStore.hospitalInfo.hospital?.route }}
        </div>
        <div class="releaseTime">
          退号时间:就诊前一工作日{{ hospitalStore.hospitalInfo.bookingRule?.quitTime }}前取消
        </div>
        <div class="rule">预约挂号规则</div>
        <div class="ruleInfo" v-for="(item,index) in hospitalStore.hospitalInfo.bookingRule?.rule" :key="index">
          {{ item }}
        </div>
      </div>
    </div>
    <!-- 放置每一个医院的科室的数据 -->
    <div class="deparment">
      <div class="leftNav">
        <ul>
          <li @click="changeIndex(index)" :class="{active:index==currentIndex}" v-for="(item,index) in hospitalStore.deparmentArr" :key="item.depcode">{{ item.depname }}</li>
        </ul>
      </div>
      <div class="deparmentInfo">
        <!-- 用一个div代表:大科室与小科室 -->
        <div class="showDeparment" :class="{active:index==currentIndex}" v-for="(item,index) in hospitalStore.deparmentArr" :key="item.depcode">
          <h1 class="cur">{{ item.depname }}</h1>
          <!-- 每个大的科室下的小科室 -->
          <ul>
            <li @click="showLogin(item,index)" v-for="(item2,index) in item.children" :key="item2.depcode">{{ item2.depname }}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入医院详情仓库的数据
import { ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import useDetailStore from '../../../store/modules/hospitalDetail'
let hospitalStore = useDetailStore();
// 获取路由器
let $router = useRouter();
// 获取路由对象
let $route = useRoute();
// 控制科室高亮的响应式数据
let currentIndex = ref<number>(0)
// 左侧大的科室点击事件
const changeIndex = (index:number)=>{
  currentIndex.value = index;
  // 点击导航获取右侧科室(大的科室h1标题)
  let allH1 = document.querySelectorAll('.cur')
  // 滚动到对应的科室位置
  allH1[currentIndex.value].scrollIntoView({
    behavior:'smooth' //过渡动画效果
  })
}

// 点击科室按钮回调
const showLogin = (item:any,index:number)=>{
  // 点击某一个科室按钮,进入到响应的预约挂号详情页
  // 跳转到预约挂号详情页面
  $router.push({path:'/hospital/register_step1'
  ,query:{hoscode:$route.query.hoscode,depcode:item.children[index].depcode}})
}
</script>

<style scoped lang="scss">
.register{
  .top{
    display: flex;
    margin-left: 20px;
    .title{
      font-size: 25px;
    }
    .level{
      margin-left: 10px;
      color: #7f7f7f;
      text-align: center;
      line-height: 30px;
      span{
        margin-right: 5px;
      }
    }
  }
  .content{
    display: flex;
    margin-top: 20px;
    margin-left: 20px;
    .left{
      img{
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
    }
    .right{
      flex: 1;
      margin-left: 20px;
      .time,.address,.route,.releaseTime,.ruleInfo{
        margin-top: 8px;
        color: #7f7f7f;
        line-height: 22px;
      }
      .rule{
        margin-top: 10px;
      }
    }
  }
  .deparment{
    margin-top: 20px;
    display: flex;
    width: 100%;
    height: 500px;
    .leftNav{
      width: 80px;
      height: 100%;
      ul{
        width: 100%;
        height: 100%;
        background: rgb(248, 248, 248);
        display: flex;
        flex-direction: column;
        li{
          flex: 1;
          text-align: center;
          color: #7f7f7f;
          font-size: 14px;
          line-height: 40px;
          cursor: pointer;
          &.active{
            border-left: 2px solid red;
            color: red;
            background: white;
          }
        }
      }
    }
    .deparmentInfo{
      flex: 1;
      margin-left: 20px;
      height: 100%;
      overflow: auto;   //使多的文字可以滚动滚动
      &::-webkit-scrollbar{  //隐藏右侧滚动条
        display: none;  
      }
      .showDeparment{
        background: rgb(248, 248, 248);
        padding: 10px;
        h1{
          color: #7f7f7f;
          margin: 10px 0;
          font-weight: 600;
        }
        ul{
          display: flex;
          flex-wrap: wrap;
          margin: 10px 0;
          li{
            width: 33%;
            color: #7f7f7f;
            line-height: 30px;
            cursor: pointer;
          }
        }
      }
    }
  }
}

</style>